<!--小区列表页面 -->
<template>
  <div>

    <!-- 面包屑  -->
    <div id="div1">
      <!-- :显示当前路劲,快速返回之前的页面 -->
      <div id="navigation">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/admin' }"
            >小区管理</el-breadcrumb-item
          >
          <el-breadcrumb-item>小区列表</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 刷新 :size="mini" -->
      <div id="push">
        <i class="el-icon-refresh" @click="push"></i>
      </div>
    </div>
    <hr />
    <div>
      <!-- 搜索框部分 -->
      <div id="serch">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="日期">
            <el-date-picker
              v-model="startTime"
              type="datetime"
              placeholder="选择开始时间"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
            ></el-date-picker>
            <el-date-picker
              v-model="endTime"
              type="datetime"
              placeholder="选择结束时间"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="小区名称">
            <el-input v-model="comName" placeholder="请输入小区名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="onSubmit"
              >搜索</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <!-- 按钮,记录条数 -->
      <div id="div3" style="width: 100%">
        <!-- 删除添加按钮 -->
        <div id="buttone">
          <el-button type="danger" @click="deleteChoose">批量删除</el-button>
          <el-button type="primary" @click="addA">添加</el-button>
        </div>
        <!-- 显示记录条数 -->
        <div id="butt">
          <h3>
            共有数据:<el-link type="danger">{{ tableData.length }}</el-link
            >条
          </h3>
        </div>
      </div>
      <!-- 主体查询部分 -->
      <div id="tableg">
        <el-table
          :data="
            tableData.slice(
              (currentPage - 1) * pagesize,
              currentPage * pagesize
            )
          "
          @selection-change="handleSelectionChange"
          :header-cell-style="{
            background: '#eef1f6',
            color: '#606266',
            textAlign: 'center',
          }"
          :cell-style="{ textAlign: 'center' }"
          style="width: 100%"
        >
          <el-table-column
            type="selection"
            width="65px"
            style="border-right: 1px solid gray"
          >
          </el-table-column>
          <!-- id -->
          <el-table-column label="ID" width="50px">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.id }}</span>
            </template>
          </el-table-column>
          <!-- 小区编号 -->
          <el-table-column label="小区编号">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.comNum }}</span>
            </template>
          </el-table-column>
          <!-- 小区名称 -->
          <el-table-column label="小区名称">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.comName }}</span>
            </template>
          </el-table-column>
          <!-- 坐落地址 -->
          <el-table-column label="坐落地址">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.address }}</span>
            </template>
          </el-table-column>
          <!-- 占地面积 -->
          <el-table-column label="占地面积（m2）">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.size }}</span>
            </template>
          </el-table-column>
          <!-- 总栋数 -->
          <el-table-column label="总栋数">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.numbers }}</span>
            </template>
          </el-table-column>
          <!-- 总户数 -->
          <el-table-column label="总户数">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.households }}</span>
            </template>
          </el-table-column>
          <!-- 绿化率 -->
          <el-table-column label="绿化率(%)">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.green }}</span>
            </template>
          </el-table-column>
          <!-- 缩略图 -->
          <el-table-column label="缩略图">
            <template slot-scope="scope">
              <el-popover
                align="left"
                placement="top-start"
                title=""
                trigger="hover"
              >
                <img
                  :src="scope.row.imgs"
                  alt=""
                  style="width: 200px; height: 200px"
                />
                <img
                  :src="scope.row.imgs"
                  alt=""
                  slot="reference"
                  style="width: 50px; height: 50px"
                />
                <!-- <span  style="margin-left: 10px" >{{ scope.row.imgs }}</span> -->
              </el-popover>
            </template>
          </el-table-column>
          <!-- 开发商名称 -->
          <el-table-column label="开发商名称">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.boss }}</span>
            </template>
          </el-table-column>
          <!-- 物业公司名称 -->
          <el-table-column label="物业公司名称">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.property }}</span>
            </template>
          </el-table-column>
          <el-table-column label="创建时间">
            <template slot-scope="scope">
              <i class="el-icon-time"></i>
              <span style="margin-left: 10px">{{ scope.row.comTime }}</span>
            </template>
          </el-table-column>
          <!-- 状态 -->
          <el-table-column label="状态">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.comStatu }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-link
                icon="el-icon-edit"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-link
              >
              <el-link
                icon="el-icon-delete"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-link
              >
              <!-- <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button> -->
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[2, 5, 10, 20, 40]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length"
        >
        </el-pagination>
      </div>

      <!-- 添加模态窗体 -->
      <div>
        <el-dialog title="添加" :visible.sync="dialogFormVisible">
          <el-form :model="add">
            <!-- 小区缩略图 -->

            <el-form-item
              label="小区缩略图"
              v-model="add"
              :label-width="formLabelWidth"
            >
              <el-upload
                action="http://localhost:8086/uploadimg"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                :on-success="uploadOk"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt />
              </el-dialog>
            </el-form-item>
            <el-form-item label="所属管理员" :label-width="formLabelWidth">
              <el-select v-model="add.adminId" style="width: 730px">
                <el-option
                  v-for="name in names"
                  :key="name.id"
                  :label="name.adminname"
                  :value="name.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <!-- 小区编号 -->
            <el-form-item label="小区编号" :label-width="formLabelWidth">
              <el-input v-model="add.comNum" autocomplete="off"></el-input>
            </el-form-item>
            <!-- 小区名称 -->
            <el-form-item label="小区名称" :label-width="formLabelWidth">
              <el-input v-model="add.comName" autocomplete="off"></el-input>
            </el-form-item>
            <!-- 坐落地址 -->
            <el-form-item label="坐落地址" :label-width="formLabelWidth">
              <el-input v-model="add.address" autocomplete="off"></el-input>
            </el-form-item>
            <!-- 占地面积 -->
            <el-form-item label="占地面积" :label-width="formLabelWidth">
              <el-input v-model="add.size" autocomplete="off"></el-input>
            </el-form-item>
            <!-- 绿化率 -->
            <el-form-item label="绿化率" :label-width="formLabelWidth">
              <el-input v-model="add.green" autocomplete="off"></el-input>
            </el-form-item>
            <!-- 总栋数 -->
            <el-form-item label="总栋数" :label-width="formLabelWidth">
              <el-input v-model="add.numbers" autocomplete="off"></el-input>
            </el-form-item>
            <!-- 总户数 -->
            <el-form-item label="总户数" :label-width="formLabelWidth">
              <el-input v-model="add.households" autocomplete="off"></el-input>
            </el-form-item>
            <!-- 开发商名称 -->
            <el-form-item label="开发商名称" :label-width="formLabelWidth">
              <el-input v-model="add.boss" autocomplete="off"></el-input>
            </el-form-item>
            <!-- 物业公司 -->
            <el-form-item label="物业公司" :label-width="formLabelWidth">
              <el-input v-model="add.property" autocomplete="off"></el-input>
            </el-form-item>
            <!-- 状态 显示/已停用-->
            <el-form-item label="状态" :label-width="formLabelWidth">
              <el-radio-group v-model="add.comStatu">
                <el-radio label="显示"></el-radio>
                <el-radio label="已停用"></el-radio>
              </el-radio-group>
            </el-form-item>
            <!-- 小区创建时间 -->
            <el-form-item label="创建时间">
              <el-date-picker
                v-model="add.comTime"
                type="date"
                placeholder="请选择日期"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
              ></el-date-picker>
            </el-form-item>

            <!-- <el-form-item label="小区缩略图" :label-width="formLabelWidth">
            <img :src="add.imgs" alt=""  style="width: 50px; height: 50px"/>
            </el-form-item>  -->
            <!-- 描述信息 -->
            <el-form-item label="描述信息" :label-width="formLabelWidth">
              <el-input type="textarea" v-model="add.comDesc"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="addAdmin">确 定</el-button>
          </div>
        </el-dialog>
      </div>
      <!-- 编辑模态窗体 -->
      <div>
        <el-dialog title="修改" :visible.sync="dialogTableVisible2">
          <el-form :model="form">
            <!-- 小区管理员 -->
            <el-form-item label="所属管理员" :label-width="formLabelWidth">
              <el-select v-model="form.adminname">
                <el-option
                  v-for="name in names"
                  :key="name.id"
                  :label="name.adminname"
                  :value="name.adminname"
                ></el-option>
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="小区管理员" :label-width="formLabelWidth">
            <el-input v-model="form.adminname" autocomplete="off"></el-input>
            </el-form-item> -->
            <!-- 小区编号 -->
            <el-form-item label="小区编号" :label-width="formLabelWidth">
              <el-input v-model="form.comNum" autocomplete="off"></el-input>
            </el-form-item>
            <!-- 小区名称 -->
            <el-form-item label="小区名称" :label-width="formLabelWidth">
              <el-input v-model="form.comName" autocomplete="off"></el-input>
            </el-form-item>
            <!-- 坐落地址 -->
            <el-form-item label="坐落地址" :label-width="formLabelWidth">
              <el-input v-model="form.address" autocomplete="off"></el-input>
            </el-form-item>
            <!-- 占地面积 -->
            <el-form-item label="占地面积" :label-width="formLabelWidth">
              <el-input v-model="form.size" autocomplete="off"></el-input>
            </el-form-item>
            <!-- 绿化率 -->
            <el-form-item label="绿化率" :label-width="formLabelWidth">
              <el-input v-model="form.green" autocomplete="off"></el-input>
            </el-form-item>
            <!-- 总栋数 -->
            <el-form-item label="总栋数" :label-width="formLabelWidth">
              <el-input v-model="form.numbers" autocomplete="off"></el-input>
            </el-form-item>
            <!-- 总户数 -->
            <el-form-item label="总户数" :label-width="formLabelWidth">
              <el-input v-model="form.households" autocomplete="off"></el-input>
            </el-form-item>
            <!-- 开发商名称 -->
            <el-form-item label="开发商名称" :label-width="formLabelWidth">
              <el-input v-model="form.boss" autocomplete="off"></el-input>
            </el-form-item>
            <!-- 物业公司 -->
            <el-form-item label="物业公司" :label-width="formLabelWidth">
              <el-input v-model="form.property" autocomplete="off"></el-input>
            </el-form-item>
            <!-- 状态 显示/已停用-->
            <el-form-item label="状态" :label-width="formLabelWidth">
              <el-radio-group v-model="form.comStatu">
                <el-radio label="显示"></el-radio>
                <el-radio label="已停用"></el-radio>
              </el-radio-group>
            </el-form-item>
            <!-- 小区缩略图 -->
            <el-form-item label="小区缩略图" :label-width="formLabelWidth">
              <template id="upimg">
                <el-popover
                  align="left"
                  placement="top-start"
                  title=""
                  trigger="hover"
                >
                  <img
                    :src="form.imgs"
                    alt=""
                    style="width: 300px; height: 250px"
                  />
                  <img
                    class="upimg"
                    slot="reference"
                    :src="form.imgs"
                    @click="uploadimg()"
                    style="width: 150px; height: 100px; float: left"
                  />
                </el-popover>
                <!-- <div id="upimgdiv" style="clear: both"> -->
                <el-upload
                  action="http://localhost:8086/uploadimg"
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove"
                  :on-success="updateOk"
                >
                  <i class="el-icon-circle-plus"></i>
                </el-upload>
                <!-- </div> -->
              </template>
            </el-form-item>
            <!-- 描述信息 -->
            <el-form-item label="描述信息" :label-width="formLabelWidth">
              <el-input type="textarea" v-model="form.comDesc"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogTableVisible2 = false">取 消</el-button>
            <el-button type="primary" @click="update">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogFormVisible: false,
      dialogFormVisible2: false,
      dialogTableVisible2: false,
      formLabelWidth: "120px",
      currentPage: 1, //初始页
      pagesize: 5, //每页的数据
      names: "", //定义的一个空数组
      dialogImageUrl: "",
      dialogVisible: false,
      multipleSelection: [], //定义一个数组,用于复选框的选择
      //  checked: false,
      add: {
        adminId: "",
        comNum: "SH2354",
        comName: "状元壹号",
        address: "北京市",
        size: 12000,
        numbers: 120,
        households: 1200,
        green: 1,
        imgs: "",
        boss: "万科地产",
        property: "天亚物业",
        comTime: "",
        comStatu: "",
        comDesc: "xxx小区欢迎您的入住",
      },
      //搜索框

      startTime: "",
      endTime: "",
      comName: "",
      forms: [],
      //修改
      form: {
        id: "",
        adminname: "",
        comNum: "",
        comName: "",
        address: "",
        size: 12000,
        numbers: 120,
        households: 120,
        green: 1,
        imgs: "",
        boss: "",
        property: "",
        comTime: "",
        comStatu: "",
        comDesc: "",
      },
      //页面数据展示
      tableData: [
        {
          id: 1,
          adminname: "王二",
          comNum: "xxx24464xx",
          comName: "状元壹号",
          address: "xxx市",
          size: 12000,
          numbers: 120,
          households: 500,
          green: 55.4,
          imgs:
            "http://qij47bjgg.hn-bkt.clouddn.com/a55013f4-2fda-4e28-80ac-7669d99305b8.jpg",
          boss: "XX市房产开发有限公司",
          property: "XXX市房产开发物业有限公司",
          comTime: "2016-05-02",
          comStatu: "显示",
          comDesc: "状元小区欢迎您",
        },
        {
          id: 2,
          adminname: "张三",
          comNum: "xxx24464xx",
          comName: "状元壹号",
          address: "xxx市",
          size: 12000,
          numbers: 120,
          households: 500,
          green: 55.4,
          imgs:
            "http://qij47bjgg.hn-bkt.clouddn.com/a55013f4-2fda-4e28-80ac-7669d99305b8.jpg",
          boss: "XX市房产开发有限公司",
          property: "XXX市房产开发物业有限公司",
          comTime: "2016-05-02",
          comStatu: "显示",
          comDesc: "状元小区欢迎您",
        },
        {
          id: 3,
          adminname: "马斯",
          comNum: "xxx24464xx",
          comName: "状元壹号",
          address: "xxx市",
          size: 12000,
          numbers: 120,
          households: 500,
          green: 55.4,
          imgs:
            "http://qij47bjgg.hn-bkt.clouddn.com/a55013f4-2fda-4e28-80ac-7669d99305b8.jpg",
          boss: "XX市房产开发有限公司",
          property: "XXX市房产开发物业有限公司",
          comTime: "2016-05-02",
          comStatu: "已停用",
          comDesc: "状元小区欢迎您",
        },
      ],
    };
  },
  //面包屑导航栏

  //展示页面数据
  created: function () {
    // alert("找到了用户");
    //触发管理员事件,查找到所有管理员
    this.getAdmin();
    //展示页面数据事件
    this.$axios
      .get("comm/findComm")
      .then((res) => {
        if (res.data.code == 200) {
          this.tableData.length = 0;
          this.tableData = res.data.data;
        }
      })
      .catch((error) => {
        console.log(error);
      });
  },
  methods: {
    //页面刷新
    push: function () {
      location.reload();
    },
    //复选框删除
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection);
    },
    //上传图片
    uploadOk(response, file, fileList) {
      console.log(response);
      this.add.imgs = response.data;
    },
    updateOk(response, file, fileList) {
      console.log(response);
      this.form.imgs = response.data;
      console.log(this.form.imgs);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //搜索框
    onSubmit: function () {
      //console.log('submit!');
      //alert("xxxxxxx");
      this.$axios
        .post("/comm/findLike", {
          startTime: this.startTime,
          endTime: this.endTime,
          comName: this.comName,
        })
        .then((res) => {
          //alert("查询成功了");
          this.$message(res.data.msg);
          if (res.data.code == 200) {
            this.tableData = res.data.data;
            console.log(this.tableData);
            this.$message(res.data.msg);
          } else {
            this.$message(res.data.msg);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //分页
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function (size) {
      this.pagesize = size;
      console.log(this.pagesize); //每页下拉显示数据
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
      console.log(this.currentPage); //点击第几页
    },
    //编辑
    handleEdit(index, row) {
      // alert(row.name+row.address);
      // alert(row.id);
      this.form.id = row.id;
      this.form.adminname = row.admin.adminname;
      this.form.comNum = row.comNum;
      this.form.comName = row.comName;
      this.form.address = row.address;
      this.form.size = row.size;
      this.form.green = row.green;
      this.form.numbers = row.numbers;
      this.form.households = row.households;
      this.form.boss = row.boss;
      this.form.comTime = row.comTime;
      this.form.property = row.property;
      this.form.comStatu = row.comStatu;
      this.form.imgs = row.imgs;
      this.form.comDesc = row.comDesc;
      //this.form=row;
      //显示模态窗体
      this.dialogTableVisible2 = true;
    },
    getAdmin: function () {
      //alert("进来了吗");
      this.$axios
        .get("/admin/adminList")
        .then((res) => {
          if (res.data.statusCode == 200) {
            this.names = res.data.data; //在空数组追加相应的数据
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //修改
    update: function () {
      // alert(this.form.id+"----------------"+this.form.comTime);
      // alert("111111:::"+this.form.imgs);
      this.$axios
        .put("/comm/updateAll", {
          id: this.form.id,
          adminname: this.form.adminname,
          comNum: this.form.comNum,
          comName: this.form.comName,
          address: this.form.address,
          size: this.form.size,
          green: this.form.green,
          numbers: this.form.numbers,
          households: this.form.households,
          boss: this.form.boss,
          property: this.form.property,
          comTime: this.form.comTime,
          comStatu: this.form.comStatu,
          imgs: this.form.imgs,
          comDesc: this.form.comDesc,
        })
        .then((res) => {
          if ((res.data.data = 200)) {
            // alert("lll"+this.form.imgs);
            //alert("修改成功");
            this.$message(res.data.msg);
            for (var i = 0; i < this.tableData.length; i++) {
              if (this.tableData[i].id == this.form.id) {
                // alert("循环进去了");
                this.tableData[i].adminname = this.form.adminname;
                this.tableData[i].comNum = this.form.comNum;
                this.tableData[i].comName = this.form.comName;
                this.tableData[i].address = this.form.address;
                this.tableData[i].size = this.form.size;
                this.tableData[i].green = this.form.green;
                this.tableData[i].numbers = this.form.numbers;
                this.tableData[i].households = this.form.households;
                this.tableData[i].boss = this.form.boss;
                this.tableData[i].property = this.form.property;
                this.tableData[i].comStatu = this.form.comStatu;
                this.tableData[i].imgs = this.form.imgs;
                this.tableData[i].comDesc = this.form.comDesc;
                this.dialogTableVisible2 = false;
              }
            }
          }
        })
        .catch((error) => {});
      this.dialogTableVisible2 = false;
    },

    //添加
    addA() {
      //显示添加按钮模态窗体内容
      this.dialogFormVisible = true;
    },
    addAdmin: function () {
      //alert("开始添加了");
      this.$axios
        .post("/comm/addAll", {
          adminId: this.add.adminId,
          comNum: this.add.comNum,
          comName: this.add.comName,
          address: this.add.address,
          size: this.add.size,
          green: this.add.green,
          numbers: this.add.numbers,
          households: this.add.households,
          boss: this.add.boss,
          property: this.add.property,
          comTime: this.add.comTime,
          comStatu: this.add.comStatu,
          imgs: this.add.imgs,
          comDesc: this.add.comDesc,
        })
        .then((res) => {
          if ((res.data.code = 200)) {
            //alert("添加成功了");
            this.$message({
              message: "添加成功",
              type: "success",
            });
            this.dialogFormVisible = false;
            this.$options.methods.push(); //在添加方法中调用刷新的方法
          } else {
            this.dialogFormVisible = false;
            this.$message({
              message: "添加失败",
              type: "error",
            });
          }
        })
        .catch((error) => {});
      this.dialogTableVisible = false;
    },
    //删除
    handleDelete(index, row) {
      //console.log(index, row);
      if (confirm("确定要删除吗?")) {
        this.$axios
          .delete("/comm/deleteOne", {
            data: { id: row.id },
          })
          .then((res) => {
            if (res.data.code == 200) {
              this.tableData.splice(index, 1);
            }
          })
          .catch((error) => {});
      }
    },
    //选择删除
    deleteChoose: function (index, row) {
      //定义一个ids
      let ids = "";
      if (this.multipleSelection.length == 0) {
        alert("至少选择一行");
      } else {
        for (let j = 0; j < this.multipleSelection.length; j++) {
          ids += this.multipleSelection[j].id + ",";
        }
        alert(ids);
        this.$axios
          .delete("/comm/deleteChoose", {
            params: {
              ids: ids,
            },
          })
          .then((res) => {
            // alert(res.data.code);
            if (res.data.code == 200) {
              this.$message({
                message: "删除成功",
                type: "success",
              });
              for (let j = 0; j < this.multipleSelection.length; j++) {
                //alert("for循环有用吗");
                this.tableData.splice(index, 1);
              }
            } else {
              this.$message({
                message: "删除失败",
                type: "error",
              });
            }
          })
          .catch((error) => {
            console.log(error);
          });
      }
    },
    //其他
  },
};
</script>
<style scoped>
#upimgdiv .el-upload,
#upimgdiv .el-button,
#upimgdiv {
  height: 20px;
  width: 80px;
  margin: 4px 4px;
  line-height: 0px;
}
#div1 {
  height: 30px;
  line-height: 30px;
}
#navigation {
  /* margin-top: 5px; */
  float: left;
}
#push {
  line-height: 20px;
  float: right;
  font-size: 20px;
}
#serch {
  text-align: center;
  line-height: 30px;
  font-size: 19px;
  margin-top: 30px;
}
#div3 {
  line-height: 50px;
}
#buttone {
  margin-top: 20px;
  /* display: inline-block; */
  float: left;
}
#butt {
  float: right;
}
#tableg {
  line-height: 30px;
  align-content: center;
}
#tableg .el-table__header th,
#tableg .el-table__header tr {
  background-color: rgb(109, 53, 240);
}
.particles-js {
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>